<template>
    <div class="">
        <div id="provinceChart" style="width: 100%;height:400px;"></div>
    </div>
</template>


<script lang="ts">
    import {
        Component,
        Prop,
        Vue
    }
    from 'vue-property-decorator';
    import * as echarts from 'echarts'

    @Component({
        components: {
        },
    })

   export default class Examine extends Vue {
       mounted () {
           this.drawLine();
       }

       drawLine(){
            //基于准备好的dom，初始化echarts实例
            const el = document.getElementById('provinceChart') as HTMLDivElement;
            let myChart = echarts.init(el);
            myChart.setOption({
                 legend: {
                    data:['复苏总量','住院手术','日间手术']
                },
                xAxis: {
                    type: 'category',
                    boundaryGap : false,
                    data: ['8:00', '8:30', '9:00', '9:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name:'复苏总量',
                        data: [22, 18, 25],
                        type: 'line',
                        smooth: true
                    },{
                        name:'住院手术',
                        data: [8, 15, 9],
                        type: 'line',
                        smooth: true
                    },{
                        name:'日间手术',
                        data: [15, 10, 12],
                        type: 'line',
                        smooth: true
                    }
                ]
            })
       }
   }
</script>

<style scoped lang="scss">

</style>